<template>
	<view class="phonedoor">
		<view class="phonedoor-title">
			<view class="title">
				<image src="../../../../static/icons/坐标.png" mode=""
					style="width: 53rpx;height:53rpx;vertical-align: middle;"></image>南航碧桂园小区
			</view>
			<view class="title_two">
				请选择要开的门并保持蓝牙距在100米内
			</view>
		</view>
		<view class="Door-item">
			<view :class="active==item.id?'active':'item'" v-for="item in Doorlist" :key="item.id"
				@click="dooractive(item.id)">
				<view class="item-box">
					<view class="left">
						<view class="left-box">
						</view>
					</view>
					<view class="right">
						<view class="">
							{{item.door}}
						</view>
						<view class="door-adress" style="font-size: 14px;">
							{{item.adress}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="Doot-Button">
			<button class="Btn" style="border: none;" @click="openDoor">确认开门</button>
		</view>
	</view>
</template>

<script setup>
	import {
		useServerStore
	} from '../../../../stores/serverStore.js';
	import {
		ref,
		onMounted
	}
	from 'vue'
	import {
		getDoorwhere
	} from '../../../../api/serverData.js'
	const serverStore = useServerStore()
	const Doorlist = ref()
	onMounted(() => {
		getDoorwhere().then(res => {
			Doorlist.value = res.data
		})
	})
	let active = ref(1)
	const dooractive = (id) => {
		active.value = id

	}
	const openDoor = () => {
		uni.showToast({
			title: '开锁中',
			icon: "loading"
		})
		setTimeout(() => {
			uni.showToast({
				title: '开锁成功',
			})
		}, 1500)
	}
</script>

<style lang="scss">
	.Door-item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			border: 2rpx solid #f2f2f2;
			border-radius: 20rpx;
			background-color: white;
			padding: 20rpx;
			margin-bottom: 30rpx;

			.item-box {
				display: flex;
				align-items: center;
			}

			.left-box {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #e6f1ff;
				margin-right: 30rpx;
			}

			.right {
				margin-right: 30rpx;
				line-height: 60rpx;

				.door-adress {
					color: #9a9a9a;
				}

			}
		}

		.active {
			border: 2rpx solid #f2f2f2;
			border-radius: 20rpx;
			background-color: #006eff;
			padding: 20rpx;
			margin-bottom: 30rpx;

			.item-box {
				display: flex;
				align-items: center;
			}

			.left-box {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: white;
				margin-right: 30rpx;
			}

			.right {
				margin-right: 30rpx;
				line-height: 60rpx;
				color: white;
			}
		}
	}

	.phonedoor {
		background-color: #fcfcfc;
		padding: 30rpx;
		height: 100vh;

		.phonedoor-title {
			.title {
				font-size: 50rpx;
				margin-bottom: 30rpx;
			}

			.title_two {
				color: #9a9a9a;
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}
		}

		.Doot-Button {
			margin-top: 50rpx;

			.Btn {
				background-color: #2ed477;
				color: white;
				font-size: 35rpx;
			}
		}
	}
</style>